<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                <th>0</th>
                <th>小明</th>
                <th>24</th>
                <th>男</th>
            </tr>      -->
            </tbody>
        </table>
    </div>
    <script>

        let initFn = (function () {
            // 数据    对象数组；
            let data = [
                {
                    id: 0,
                    name: '小明',
                    age: 24,
                    gender: '男'
                },
                {
                    id: 1,
                    name: '小芳',
                    age: 30,
                    gender: '女'
                },
                {
                    id: 2,
                    name: '小美',
                    age: 31,
                    gender: '女'
                },
                {
                    id: 3,
                    name: '小刚',
                    age: 21,
                    gender: '男'
                },
                {
                    id: 4,
                    name: '小琪',
                    age: 18,
                    gender: '女'
                }
            ];

            class FilterTable {
                constructor(data) {
                    this.data = JSON.parse(JSON.stringify(data));
                    this.newData = data;
                    this.ageIndex = 0;
                    this.genderIndex = 0;
                    this.tbodyHtml = '';
                    this.tbody = document.querySelector('#table tbody');
                    this.ageBtns = Array.from(document.querySelectorAll('.age_sort a'));
                    this.genderBtns = Array.from(document.querySelectorAll('.gender_show a'));
                    this.addEvent();
                    this.init(this.newData);
                }

                init(data) {
                    this.tbodyHtml = '';

                    data.map(item => {
                        this.tbodyHtml += `
                            <tr>
                                <th>${item.id}</th>
                                <th>${item.name}</th>
                                <th>${item.age}</th>
                                <th>${item.gender}</th>
                            </tr>
                        `;
                    });
                    this.tbody.innerHTML = this.tbodyHtml;
                }

                // 给按钮添加事件
                addEvent() {
                    this.ageBtns.map((item, index) => {
                        let activeIndex = item.className.indexOf('active');
                        if (activeIndex >= 0) {
                            this.ageIndex = index;
                        }
                        item.onclick = this.searchAge.bind(this, item, index);
                    });
                    this.genderBtns.map((item, index) => {
                        let activeIndex = item.className.indexOf('active');
                        if (activeIndex >= 0) {
                            this.genderIndex = index;
                        }
                        item.onclick = this.searchGender.bind(this, item, index);
                    });
                }

                // 按年龄排序
                searchAge(...args) {
                    let [item, index] = args;
                    this.ageBtns.map(item => item.classList.remove('active'));
                    item.className = 'active';
                    this.ageIndex = index;

                    this.comFilter(index);
                }

                // 按性别
                searchGender(...args) {
                    let [item, index] = args;
                    this.genderBtns.map(item => item.classList.remove('active'));
                    item.className = 'active';
                    this.genderIndex = index;

                    this.comFilter(index);
                }

                // 公共过滤
                comFilter(i) {
                    let ageArr = [
                        () => { this.newData.sort((item1, item2) => item1.age - item2.age) },
                        () => { this.newData.sort((item1, item2) => item2.age - item1.age) },
                        () => { this.newData = [...this.data] }
                    ]
                    let genderArr = [
                        () => { this.newData = this.data.filter(item => item.gender === '男') },
                        () => { this.newData = this.data.filter(item => item.gender === '女') }
                    ]

                    if (this.genderIndex !== 2 && this.ageIndex !== 2) {
                        genderArr[this.genderIndex]();
                        ageArr[this.ageIndex]();
                    } else {
                        if (this.genderIndex === 2 && this.ageIndex !== 2) {
                            ageArr[this.genderIndex]();
                            ageArr[this.ageIndex]();
                        } else if (this.genderIndex !== 2 && this.ageIndex === 2) {
                            genderArr[this.genderIndex]();
                        } else if (this.genderIndex === 2 && this.ageIndex === 2) {
                            ageArr[this.ageIndex]();
                        }
                    }
                    this.init(this.newData);
                }
            }

            var table = new FilterTable(data);
            console.log(table);
        });
        initFn();
    </script>
</body>

</html>